<template>
  <div class="discussToest">
    <h1>111111111</h1>
    <div class="mui-input-row" style="margin: 10px 5px;">
      <textarea id="textarea" rows="5" placeholder="多行文本框" v-model="msg"></textarea>
    </div>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" @click="gefdasted">发表评论</button>

    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
      <li class="mui-table-view-cell" v-for="(item,i) in fsafsafsafsa" :key='i'>
        <div class="mui-table">
          <div class="mui-table-cell mui-col-xs-10">
            <h5>第{{i+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time|dateFormat}}</h5>
            <p class="gjhaha">{{item.content==="undefined"?"无输入":item.content}}</p>
          </div>
        </div>
      </li>
    </ul>

    <button type="button" class="mui-btn mui-btn-block" @click="getMore">加载更多</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      fsafsafsafsa: [],
      msg:""
    };
  },
  props: ["id"],
  created() {
    this.gertdfd();
  },
  methods: {
    gertdfd() {
      this.$http
        .get(
          "http://www.liulongbin.top:3005/api/getcomments/"+this.id+"?pageindex=" +this.page
        )
        .then(result => {
        //   console.log(result.body);
          if (result.body.status === 0) {
            // this.fsafsafsafsa = result.body.message;
            this.fsafsafsafsa = this.fsafsafsafsa.concat(result.body.message)

          } else {
            console.log(请求不合格);
          }
        });
    },
    getMore(){
        this.page++;
        this.gertdfd()
    },
    gefdasted(){
        this.$http.post("http://www.liulongbin.top:3005/api/postcomment/"+this.id,{content:this.msg.trim()}).then(result=>{
            console.log(result.body);
            if(result.body.status===0){
                let cmt={
                    user_name:"匿名用户",
                    add_time:Date.now(),

                    content:this.msg.trim()
                };
                this.fsafsafsafsa.unshift(cmt);
                this.msg=""
            }
            
        })
    }
  }
};
</script>
<style lang="less" scoped>
.discussToest {
  width: 100%;
  h1 {
    font-size: 18px;
  }
  h5 {
    display: -webkit-box;
    background-color: #cccccc;
    width: 100%;
  }
  .mui-input-row {
    margin: 0;
    #textarea {
      margin: 0;
    }
  }
  p {
    text-indent: 2e;
  }
}
</style>
